<template>
	<view class="container">
		<!-- <u-navbar autoBack title="" bgColor="transparent" leftIconColor="#26282b" titleStyle="#fff" leftIconSize="46rpx"
			placeholder>
		</u-navbar> -->
		<FeNavbar />
		<view class="page-title">修改手机号</view>
		<view class="page-sub-title">当前绑定 +86 {{phoneDesen('18285859696')}}</view>
		<view class="from-wrap">
			<view class="input-row-item">
				<view class="input-item-title">新手机号</view>
				<view class="input-wrap">
					<image src="@/static/login/phone.png" mode="aspectFill"></image>
					<view class="input-box">
						<input type="number" placeholder="请输入新手机号" maxlength="11" v-model="submitData.phone"
							placeholder-class="placeholderClass" />
					</view>
				</view>
			</view>
			<view class="input-row-item">
				<view class="input-item-title">手机验证码</view>
				<view class="input-wrap">
					<image src="@/static/login/yzm.png" mode="aspectFill"></image>
					<view class="input-box">
						<input type="number" placeholder="请输入手机验证码" :maxlength="yzmMaxlength"
							v-model="submitData.phoneCode" placeholder-class="placeholderClass" />
					</view>
					<view class="yzm-btn" :class="phoneCoding ? 'coding-bg' : ''" @click="handleGetPhoneCode">
						{{phoneCodeTips}}
						<u-code :seconds="phoneSeconds" changeText="X秒" @start="phoneCodeStart" @end="phoneCodeEnd"
							ref="refPhoneCode" @change="phoneCodeChange"></u-code>
					</view>
				</view>
			</view>
			<view class="input-row-item">
				<view class="input-item-title">邮箱234344444@qq.com的验证码</view>
				<view class="input-wrap">
					<image src="@/static/login/yzm.png" mode="aspectFill"></image>
					<view class="input-box">
						<input type="number" placeholder="请输入邮箱验证码" :maxlength="yzmMaxlength"
							v-model="submitData.emailCode" placeholder-class="placeholderClass" />
					</view>
					<view class="yzm-btn" :class="emailCoding ? 'coding-bg' : ''" @click="handleGetEmailCode">
						{{emailCodeTips}}
						<u-code :seconds="emailSeconds" changeText="X秒" @start="emailCodeStart" @end="emailCodeEnd"
							ref="refEmailCode" @change="emailCodeChange"></u-code>
					</view>
				</view>
			</view>
			<view class="login-btn" @click="handleConfirm">确定</view>
		</view>
	</view>
</template>

<script>
	import {
		phoneDesen
	} from "@/util/helper.js"
	export default {
		data() {
			return {
				submitData: {
					phone: "",
					phoneCode: "",
					emailCode: ""
				},
				yzmMaxlength: 6,
				phoneCodeTips: "",
				emailCodeTips: "",
				phoneSeconds: 60,
				emailSeconds: 60,
				phoneCoding: false,
				emailCoding: false,
				phoneDesen,
				opts: null
			};
		},
		onLoad(opts) {
			this.option = opts;
		},
		methods: {
			handleConfirm() {
				if (this.isEmpty(this.submitData.phone)) {
					uni.showToast({
						title: "请输入新手机号",
						icon: "none"
					})
					return
				}
				if (this.isEmpty(this.submitData.phoneCode)) {
					uni.showToast({
						title: "请输入手机验证码",
						icon: "none"
					})
					return
				}
				if (this.isEmpty(this.submitData.emailCode)) {
					uni.showToast({
						title: "请输入邮箱验证码",
						icon: "none"
					})
					return
				}
			},
			async handleGetPhoneCode() {
				if (this.isEmpty(this.submitData.phone)) {
					uni.showToast({
						title: "请输入新手机号",
						icon: "none"
					})
					return
				}
				// if (!isPhone(this.submitData.phone)) {
				// 	uni.showToast({
				// 		title: "请输入正确的手机号码",
				// 		icon: "none"
				// 	})
				// 	return
				// }

				if (this.$refs.refPhoneCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					//action: 1-注册, 2-登录 3-重置密码
					// const _sms = await sms({
					// 	phone: this.submitData.phone,
					// 	action: this.wayIndex === 1 ? 2 : 1
					// });

					uni.showToast({
						title: "手机验证码已发送",
						icon: "none"
					})

					// 通知验证码组件内部开始倒计时
					this.$refs.refPhoneCode.start();
				}
			},

			async handleGetEmailCode() {
				if (this.$refs.refEmailCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					//action: 1-注册, 2-登录 3-重置密码
					// const _sms = await sms({
					// 	phone: this.submitData.phone,
					// 	action: this.wayIndex === 1 ? 2 : 1
					// });

					uni.showToast({
						title: "邮箱验证码已发送",
						icon: "none"
					})

					// 通知验证码组件内部开始倒计时
					this.$refs.refEmailCode.start();
				}
			},

			phoneCodeChange(text) {
				this.phoneCodeTips = text;
			},
			emailCodeChange(text) {
				this.emailCodeTips = text;
			},
			phoneCodeStart() {
				this.phoneCoding = true;
			},
			phoneCodeEnd() {
				this.phoneCoding = false
			},
			emailCodeStart() {
				this.emailCoding = true;
			},
			emailCodeEnd() {
				this.emailCoding = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.page-title {
			font-size: 50rpx;
			font-weight: 600;
			color: #26282B;
			line-height: 60rpx;
			padding: 32rpx 0 0 32rpx;
		}

		.page-sub-title {
			font-size: 28rpx;
			line-height: 33rpx;
			color: #7B828A;
			padding: 16rpx 0 16rpx 32rpx;
		}

		.from-wrap {
			padding: 0 32rpx;

			.input-row-item {

				.input-item-title {
					font-size: 26rpx;
					color: #7B828A;
					margin: 32rpx 0 12rpx 0;
				}

				.input-wrap {
					height: 96rpx;
					background-color: #F4F5F7;
					border-radius: 12rpx;
					display: flex;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
						margin: 0 28rpx;
					}

					.input-box {
						height: 100%;
						flex: 1;
						padding-right: 28rpx;
						color: #26282B;

						input {
							border: 0;
							width: 100%;
							height: 100%;
							font-size: 32rpx;
						}
					}

					.yzm-btn {
						width: 196rpx;
						height: 76rpx;
						line-height: 76rpx;
						font-size: 26rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #26282B;
						text-align: center;
						background-color: #FFE269;
						border-radius: 12rpx;
						margin-right: 10rpx;
					}

					.coding-bg {
						background-color: #D2D9E1;
					}

					.placeholderClass {
						color: #969696;
						font-size: 28rpx;
					}
				}
			}

			.login-btn {
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 12rpx;
				background: #FFE269;
				display: block;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
				color: #26282B;
				margin-top: 88rpx;
			}
		}
	}
</style>